Safari浏览器兼容性问题 |
您所在的位置：网站首页 › safari ie兼容 › Safari浏览器兼容性问题 |
|
今天修改Chrome与Safari两端对css样式表现不一致的问题，做个记录以备后续查验。未来如果遇到相关工作，我都会做记录，并对这篇文章进行更新。 项目框架：Vue 问题一：safari的input标签，blur事件、focus事件不生效解决方法：在change事件或者click事件里手动调用focus()方法 function change(e){ e.target.focus() // 手动触发一下 // ... (接下来处理其他逻辑) } function myblur(e){ conosle.log('safari浏览器里，myblur方法没有被触发') } 问题二：input输入框的默认大小及边框，Safari与Chrome表现不同；chrome会显示默认边框、背景色；解决方法：给input标签设置初始状态样式 input { outline: none; border: none; padding: 0; margin: 0; /*尺寸根据业务需求，目的是保持两端一致*/ width: 140px; height: 14px; } 问题三：table表格格式在safari里错乱解决方法：设置table样式： table { width: 100%; table-layout: fixed; } 问题四：Monospaced Number字体在两端的表现不一致原因：Monospaced Number字体在safari浏览器里不生效，系统将调用Safari默认字体。 解决方法：font-family 设置后备字体，目的是当font-family里指定的第一个字体不生效时，系统可以去调用第二个字体 font-family: "Monospaced Number", "PingFang-medium" |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |